<template>
  <div class="container">
    <div id="graphContainer" ref="graphContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Graph3D from "./ForceGraph3D/index"
import { data } from "./ForceGraph3D/json/data.json"

function getRandomInt(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const graphContainer = ref()
let myGraph: any = null
let gData = {
  nodes: [],
  links: []
}


function init() {
  myGraph = new Graph3D({
    container: graphContainer,
    options: {
      gData: gData
    }
  })
}

const nodeColor = ['#2E7BE1', '#23995B', '#CBAA2E', '#1DB6CF', '#FF635B', '#E57CDE', '#ED8E15', '#8D74F4', '#828C9D']
let colorIndex = 0

onMounted(() => {
  let nodes: any = []
  let links: any = []

  data.forEach(course => {
    nodes.push({
      id: course.courseId,
      name: course.courseName,
      cj: '0',
      type: 'course',
      courseId: course.courseId,
      courseName: course.courseName,
      nodeColor: nodeColor[colorIndex]
    })
    course.nodes.forEach((node: any) => {
      if (node.properties.cj < 3) {
        nodes.push({
          id: node.id,
          name: node.properties.name,
          cj: node.properties.cj,
          courseId: course.courseId,
          courseName: course.courseName,
          nodeColor: nodeColor[colorIndex]
        })
        if (node.parentId == '0' || node.parentId == null) {
          links.push({
            id: getRandomInt(1000, 9999),
            name: 'isChildOf',
            source: node.id,
            target: course.courseId
          })
        }
      }
    })
    course.edges.forEach((link: any) => {
      links.push({
        id: link.id,
        name: link.label,
        source: link.inV,
        target: link.outV
      })
    })
    colorIndex++
  })
  gData.nodes = nodes

  links.forEach(link => {
    if (nodes.find(node => node.id == link.target) && nodes.find(node => node.id == link.source)) {
      gData.links.push(link)
    }
  })
  console.log('gData', gData)
  // console.log('json', json)
  init()
})

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;

  #graphContainer {
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 50%);
  }
}
</style>
